<template>
  <transition name="slide">
    <div class="user-center">
      <div class="back" @click.stop="back">
        <i class="icon-back"></i>
      </div>
      <div class="switches-wrapper">
        <Switches :switchArr="switchArr" :switchIndex="switchIndex" @clickSwitches="clickSwitches"></Switches>
      </div>
      <div class="play-btn" @click="random">
        <i class="icon-play"></i>
        <span class="text">随机播放全部</span>
      </div>
      <div class="list-wrapper" ref="listWrapper">
        <Scroll class="list-scroll" v-show="switchIndex === 0" :data="favoriteList" ref="listScr">
          <div class="list-inner">
            <SongList :songs="favoriteList" @select="addfavoriteClick"></SongList>
          </div>
        </Scroll>
        <Scroll class="list-scroll" v-show="switchIndex === 1" :data="playHistory" ref="listScroll">
          <div class="list-inner">
            <SongList :songs="playHistory" @select="addSongClick"></SongList>
          </div>
        </Scroll>
      </div>
      <div class="no-result-wrapper" v-show="resultShow">
        <NoResult :title="resultTitle"></NoResult>
      </div>
    </div>
  </transition>
</template>

<script>
  import Switches from 'base/switches';
  import SongList from 'base/song-list/SongList';
  import Scroll from 'base/scroll/scroll';
  import Song from 'common/js/song';
  import NoResult from 'base/no-result';
  import {
    mapGetters,
    mapActions
  } from 'vuex';
  import {
    playlistMixin
  } from 'common/js/mixin';

  export default {
    name: 'UserCenter',
    mixins: [playlistMixin],
    data() {
      return {
        switchArr: ['我喜欢的', '最近听得'],
        switchIndex: 0
      }
    },
    components: {
      Switches,
      SongList,
      Scroll,
      NoResult
    },
    computed: {
      resultShow() {
        if (this.switchIndex === 0) {
          return !this.favoriteList.length
        }
        if (this.switchIndex === 1) {
          return !this.playHistory.length
        }
      },
      resultTitle(){
        if (this.switchIndex === 0) {
          return '你没有收藏歌曲'
        }
        if (this.switchIndex === 1) {
          return '最近没有播放歌曲'
        }
      },
      ...mapGetters(['playHistory', 'favoriteList'])
    },
    methods: {
      clickSwitches(index) {
        this.switchIndex = index
        if (this.switchIndex === 0) {
          setTimeout(() => {
            this.$refs.listScr.refresh()
          }, 20)
        }
        if (this.switchIndex === 1) {
          setTimeout(() => {
            this.$refs.listScroll.refresh()
          }, 20)
        }
      },
      // 后退
      back() {
        this.$router.back()
      },
      addSongClick(song, index) {
        if (index !== 0) {
          this.insertSong(new Song(song))
        }
      },
      addfavoriteClick(song, index) {
        this.insertSong(new Song(song))
      },
      // 随机播放
      random() {
        let list = [];
        if (this.switchIndex === 0) {
          list = this.favoriteList
        }
        if (this.switchIndex === 1) {
          list = this.playHistory
        }
        if (list.length === 0) {
          return
        }
        list = list.map((song) => {
          return new Song(song)
        })
        this.randomPlay({
          list
        })
      },
      handlePlayList(playList) {
        const bottom = playList.length > 0 ? '60px' : ''
        this.$refs.listWrapper.style.bottom = bottom
        // 存在才会调用
        this.$refs.listScr && this.$refs.listScr.refresh()
        this.$refs.listScroll && this.$refs.listScroll.refresh()
      },
      ...mapActions(['insertSong', 'randomPlay'])
    }
  }

</script>
